<template>
  <v-center style="height: 100%">
    <template #head>
      <n-data-table :columns="columns" :data="tableData" :maxHeight="450"  :loading="loading"/>
    </template>
    <template #end>
      <v-center :row="true">
        <template #head>
          <NConfigProvider :locale="zhCN">
            <n-pagination
              v-model:page="pageNum"
              v-model:page-size="pageSize"
              :page-count="totalPages"
              show-size-picker
              :page-sizes="[10, 20, 30, 40]"
              show-quick-jumper
              :on-update:page="update"
              :on-update:page-size="updatePageSize"
            />
          </NConfigProvider>
        </template>
      </v-center>
    </template>
  </v-center>
</template>
<style scoped>
.tsbox {
  width: 100%;
  height: 100%;
}
</style>

<script>
import VCenter from "@/components/scraw/VCenter.vue";
import {zhCN, dateZhCN} from "naive-ui"
export default {
  components: {
    VCenter,
  },
  data() {
    return {
      columnItem: [
        { para: "index", title: "序号" },
        { para: "date", title: "日期" },
        {
          para: "name",
          title: "姓名",
        },
        { para: "address", title: "地址" },
      ],
    };
  },
  props: ["tableData", "columns", "pageSize", "pageNum", "totalPages", "loading"],
  methods: {
    update(pageNum) {
      this.$emit("getCPage", pageNum);
    },
    updatePageSize(pagesize) {
      this.$emit("getPageSize", pagesize);
    },
  },
  mounted() {},
  setup() {return{zhCN, dateZhCN}},
};
</script>